import { useAuthStore } from "@/store";
import { View } from "@tarojs/components";
import clsx from "clsx";
import React from "react";

interface Props extends React.PropsWithChildren {
  className?: string
  authFulfilledFn?: IFn
}
export default function GpProtected({children, className, authFulfilledFn}: Props) {
  const authenticated = useAuthStore(state => state.userInfo?.memberId)
  const toggleAuthPannel = useAuthStore(state => state.toggleAuthPannel)
  function triggerAuth() {
    process.env.NODE_ENV === 'development' && console.log('triggerAuth')
    toggleAuthPannel(true, authFulfilledFn)
  }
  if (authenticated) return children
  return (
    <View className={clsx("relative box-border", className)}>
      {children}
      <View className="absolute inset-0 z-10" onClick={triggerAuth}></View>
    </View>
  )
}
